<!DOCTYPE html>
<html lang="en" style="width:100%;height:100%">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
  <script src="https://cdn.bootcss.com/react/16.10.2/umd/react.production.min.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.min.js"></script>
  <script src="./flv.js"></script>
  <script src="https://cdn.bootcss.com/hls.js/8.0.0-beta.3/hls.min.js"></script>

  <script src="../umd/player.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
  </style>
  <link rel="stylesheet" href="../umd/player.css" />
</head>

<body style="width:100%;height:100%">
  <div id="app" style="width:100%;height:100%"></div>
  <script src="./utils.js"></script>
  <script type="text/babel">
      const app = document.getElementById("app");
      const Player = LMPlayer.Player;
      const HistoryPlayer = LMPlayer.HistoryPlayer;
      const { useState, useRef } = React;
      const options = [
        { value: "", label: "自动" },
        { value: "flv", label: "FLV" },
        { value: "hls", label: "HLS" }
      ];
      const RootCompoent = () => {
        const liveInputRef = useRef(null);
        const historyInputRef = useRef(null);
        const [file, setFile] = useState(null);
        const [playList, setPlayList] = useState(null);
        const [liveType, setLiveType] = useState("");
        const [historyType, setHistoryType] = useState("");
        return (
          <div style={{ width: "100%",height:"100%", padding: 20 }}>
            <div style={{ width: 800,height:"50%", margin: "0 auto 40px auto" }}>
              <h2 style={{ marginBottom: 10 }}>
                SinglePlayer适用直播 或者其他单文件播放 支持flv m3u8
              </h2>
              <div style={{ marginBottom: 10, display: "flex" }}>
                <select
                  onChange={e => {
                    const index = e.target.selectedIndex;
                    setLiveType(options[index].value);
                  }}
                >
                  {options.map(v =>
                    liveType === v.value ? (
                      <option value={v.value} selected>
                        {v.label}
                      </option>
                    ) : (
                      <option value={v.value}>{v.label}</option>
                    )
                  )}
                </select>
                <input
                  ref={liveInputRef}
                  style={{ flex: 1, height: 32 }}
                  // value={'http://localhost:3000/demo/h265_high.mp4'}
                  value={'http://127.0.0.1/live.flv'}
                  type="text"
                  placeholder="请输入视频地址"
                />
                <button
                  style={{ width: 60, height: 32 }}
                  onClick={e => setFile(liveInputRef.current.value)}
                >
                  播放
                </button>
              </div>
              <Player type={liveType}showLoading={false} file={file}  h265lib={'../demo'} onInitPlayer={console.log}/>
            </div>
            <div style={{ width: 800, margin: "0 auto 40px auto" }}>
              <h2 style={{ marginBottom: 10 }}>
                HistoryPlayer适用多地址拼凑一个播放 特殊场景使用
              </h2>
              <div style={{ marginBottom: 10, display: "flex" }}>
                <select
                  onChange={e => {
                    const index = e.target.selectedIndex;
                    setHistoryType(options[index].value);
                  }}
                >
                  {options.map(v =>
                    historyType === v.value ? (
                      <option value={v.value} selected>
                        {v.label}
                      </option>
                    ) : (
                      <option value={v.value}>{v.label}</option>
                    )
                  )}
                </select>
                <input
                  ref={historyInputRef}
                  style={{ flex: 1, height: 32 }}
                  type="text"
                  placeholder="请输入视频地址"
                />
                <button
                  style={{ width: 60, height: 32 }}
                  onClick={e =>
                    setPlayList(() => {
                      const list = JSON.parse(historyInputRef.current.value);
                      return formatHistoryList(
                        list,
                        list[0].beginTime,
                        list[list.length - 1].endTime
                      );
                    })
                  }
                >
                  播放
                </button>
              </div>
              <HistoryPlayer type={historyType} historyList={playList} />
            </div>
          </div>
        );
      };
      ReactDOM.render(<RootCompoent />, app);
    </script>
</body>

</html>